
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _utils = require('../utils');

const _event = require('../utils/dom/event');

const _portal = require('../mixins/portal');

const _relation = require('../mixins/relation');

const _cell = _interopRequireDefault(require('../cell'));

const _icon = _interopRequireDefault(require('../icon'));

const _popup = _interopRequireDefault(require('../popup'));

// Utils
// Mixins
// Components
const _createNamespace = (0, _utils.createNamespace)('dropdown-item');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

const _default2 = createComponent({
  mixins: [(0, _portal.PortalMixin)({
    ref: 'wrapper',
  }), (0, _relation.ChildrenMixin)('vanDropdownMenu')],
  props: {
    value: null,
    title: String,
    disabled: Boolean,
    titleClass: String,
    options: {
      type: Array,
      default: function _default() {
        return [];
      },
    },
  },
  data: function data() {
    return {
      transition: true,
      showPopup: false,
      showWrapper: false,
    };
  },
  computed: {
    displayTitle: function displayTitle() {
      const _this = this;

      if (this.title) {
        return this.title;
      }

      const match = this.options.filter((option) => option.value === _this.value);
      return match.length ? match[0].text : '';
    },
  },
  watch: {
    showPopup: function showPopup(val) {
      this.bindScroll(val);
    },
  },
  beforeCreate: function beforeCreate() {
    const _this2 = this;

    const createEmitter = function createEmitter(eventName) {
      return function () {
        return _this2.$emit(eventName);
      };
    };

    this.onOpen = createEmitter('open');
    this.onClose = createEmitter('close');
    this.onOpened = createEmitter('opened');
  },
  methods: {
    // @exposed-api
    toggle: function toggle(show, options) {
      if (show === void 0) {
        show = !this.showPopup;
      }

      if (options === void 0) {
        options = {};
      }

      if (show === this.showPopup) {
        return;
      }

      this.transition = !options.immediate;
      this.showPopup = show;

      if (show) {
        this.parent.updateOffset();
        this.showWrapper = true;
      }
    },
    bindScroll: function bindScroll(bind) {
      const { scroller } = this.parent;
      const action = bind ? _event.on : _event.off;
      action(scroller, 'scroll', this.onScroll, true);
    },
    onScroll: function onScroll() {
      this.parent.updateOffset();
    },
    onClickWrapper: function onClickWrapper(event) {
      // prevent being identified as clicking outside and closed when use get-contaienr
      if (this.getContainer) {
        event.stopPropagation();
      }
    },
  },
  render: function render() {
    const _this3 = this;

    const h = arguments[0];
    const _this$parent = this.parent;
    const { zIndex } = _this$parent;
    const { offset } = _this$parent;
    const { overlay } = _this$parent;
    const { duration } = _this$parent;
    const { direction } = _this$parent;
    const { activeColor } = _this$parent;
    const { closeOnClickOverlay } = _this$parent;
    const Options = this.options.map((option) => {
      const active = option.value === _this3.value;
      return h(_cell.default, {
        attrs: {
          clickable: true,
          icon: option.icon,
          title: option.text,
        },
        key: option.value,
        class: bem('option', {
          active,
        }),
        style: {
          color: active ? activeColor : '',
        },
        on: {
          click: function click() {
            _this3.showPopup = false;

            if (option.value !== _this3.value) {
              _this3.$emit('input', option.value);

              _this3.$emit('change', option.value);
            }
          },
        },
      }, [active && h(_icon.default, {
        class: bem('icon'),
        attrs: {
          color: activeColor,
          name: 'success',
        },
      })]);
    });
    const style = {
      zIndex,
    };

    if (direction === 'down') {
      style.top = `${offset}px`;
    } else {
      style.bottom = `${offset}px`;
    }

    return h('div', [h('div', {
      directives: [{
        name: 'show',
        value: this.showWrapper,
      }],
      ref: 'wrapper',
      style,
      class: bem([direction]),
      on: {
        click: this.onClickWrapper,
      },
    }, [h(_popup.default, {
      attrs: {
        overlay,
        position: direction === 'down' ? 'top' : 'bottom',
        duration: this.transition ? duration : 0,
        closeOnClickOverlay,
        overlayStyle: {
          position: 'absolute',
        },
      },
      class: bem('content'),
      on: {
        open: this.onOpen,
        close: this.onClose,
        opened: this.onOpened,
        closed: function closed() {
          _this3.showWrapper = false;

          _this3.$emit('closed');
        },
      },
      model: {
        value: _this3.showPopup,
        callback: function callback($$v) {
          _this3.showPopup = $$v;
        },
      },
    }, [Options, this.slots('default')])])]);
  },
});

exports.default = _default2;
